<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <title>自然微览 - 动植物科普</title>
  <link rel="stylesheet" href="zrwl.css">
</head>

<body>
  <!-- 主页面 -->
  <div id="main-page">
    <!-- 头部 -->
    <header>
      <div class="header-content">
        <!-- 导航栏 -->
        <nav class="header-nav">
          <div class="nav-brand">
            <i class="fas fa-leaf"></i>
            <span>自然微览</span>
          </div>
          <div class="nav-stats">
            <div class="stat-item">
              <i class="fas fa-paw"></i>
              <span>3种动物</span>
            </div>
            <div class="stat-item">
              <i class="fas fa-seedling"></i>
              <span>3种植物</span>
            </div>
          </div>
        </nav>

        <!-- 主标题区域 -->
        <div class="hero-section">
          <div class="hero-content">
            <h1 class="main-title">
              <span class="title-text">自然微览</span>
              <span class="title-decoration">
                <i class="fas fa-star"></i>
                <i class="fas fa-heart"></i>
                <i class="fas fa-star"></i>
              </span>
            </h1>
            <p class="subtitle">探索奇妙动植物世界 · 发现自然之美</p>
            <div class="title-features">
              <span class="feature-tag">
                <i class="fas fa-search"></i>
                科学严谨
              </span>
              <span class="feature-tag">
                <i class="fas fa-book-open"></i>
                知识丰富
              </span>
              <span class="feature-tag">
                <i class="fas fa-heart"></i>
                精心整理
              </span>
            </div>
          </div>

          <!-- 装饰性元素 -->
          <div class="hero-decoration">
            <div class="floating-icon animal-icon">
              <i class="fas fa-dove"></i>
            </div>
            <div class="floating-icon plant-icon">
              <i class="fas fa-feather-alt"></i>
            </div>
            <div class="floating-icon nature-icon">
              <i class="fas fa-mountain"></i>
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="container">
      <!-- 搜索和筛选区域 -->
      <div class="filters-container">
        <div class="search-box">
          <input type="text" id="search-input" placeholder="搜索动植物名称...">
          <button class="search-btn" id="search-btn">
            <i class="fas fa-search"></i>
          </button>
        </div>
        <div class="category-filters">
          <button class="filter-btn active" data-filter="all">全部</button>
          <button class="filter-btn" data-filter="animal">动物</button>
          <button class="filter-btn" data-filter="plant">植物</button>
          <button class="favorites-btn" id="view-favorites">
            <i class="fas fa-heart"></i>
            我的收藏
          </button>
        </div>
      </div>
      <div class="intro">
        <p>欢迎来到自然微览！这个网页将向您介绍三种迷人的动物和三种独特的植物。每一种生物都是大自然精心设计的杰作，点击卡片查看详细信息。</p>
      </div>
      <!-- 加载动画 -->
      <div class="loading-spinner" id="loading-spinner"></div>

      <!-- 无结果提示 -->
      <div class="no-results" id="no-results">
        <h3>未找到匹配的动植物</h3>
        <p>请尝试调整搜索关键词或筛选条件</p>
      </div>

      <div class="species-container">
        <div class="species-card" data-id="capybara" data-category="animal" data-name="水豚">
          <button class="favorite-btn" data-id="capybara">
            <i class="far fa-heart"></i>
          </button>
          <div class="species-image">
            <img src="image/capybara.jpeg" alt="水豚" loading="lazy">
          </div>
          <div class="species-content">
            <span class="category-label animal">动物</span>
            <h2 class="species-name">水豚</h2>
            <p class="scientific-name">Hydrochoerus hydrochaeris</p>
            <p class="species-description">
              水豚是世界上最大的啮齿动物，性格温顺，是半水栖动物。它们主要分布在南美洲的河流、湖泊和沼泽地区。</p>
            <ul class="species-features">
              <li>世界上最大的啮齿动物</li>
              <li>优秀的游泳和潜水能力</li>
              <li>性格温和，社交性强</li>
            </ul>
          </div>
        </div>

        <div class="species-card" data-id="angraecum" data-category="plant" data-name="长距彗星兰">
          <button class="favorite-btn" data-id="angraecum">
            <i class="far fa-heart"></i>
          </button>
          <div class="species-image">
            <img src="image/angraecum.jpg" alt="长距彗星兰" loading="lazy">
          </div>
          <div class="species-content">
            <span class="category-label plant">植物</span>
            <h2 class="species-name">长距彗星兰</h2>
            <p class="scientific-name">Angraecum sesquipedale</p>
            <p class="species-description">长距彗星兰是一种原产于马达加斯加的兰花，以其极长的花距而闻名，是达尔文进化论的重要例证。</p>
            <ul class="species-features">
              <li>拥有极长的花距（可达30厘米）</li>
              <li>只在夜间散发香味</li>
              <li>与特定蛾类协同进化</li>
            </ul>
          </div>
        </div>

        <div class="species-card" data-id="crested-ibis" data-category="animal" data-name="朱鹮">
          <button class="favorite-btn" data-id="crested-ibis">
            <i class="far fa-heart"></i>
          </button>
          <div class="species-image">
            <img src="image/crested-ibis.jpeg" alt="朱鹮" loading="lazy">
          </div>
          <div class="species-content">
            <span class="category-label animal">动物</span>
            <h2 class="species-name">朱鹮</h2>
            <p class="scientific-name">Nipponia nippon</p>
            <p class="species-description">朱鹮是东亚特有的珍稀鸟类，被誉为"东方宝石"。它们有着洁白的羽毛和鲜红的面部，姿态优雅。</p>
            <ul class="species-features">
              <li>洁白的羽毛和鲜红的面部</li>
              <li>曾经濒临灭绝，现已成功保护</li>
              <li>在中国文化中是吉祥的象征</li>
            </ul>
          </div>
        </div>

        <div class="species-card" data-id="dandelion" data-category="plant" data-name="蒲公英">
          <button class="favorite-btn" data-id="dandelion">
            <i class="far fa-heart"></i>
          </button>
          <div class="species-image">
            <img src="image/dandelion.jpeg" alt="蒲公英" loading="lazy">
          </div>
          <div class="species-content">
            <span class="category-label plant">植物</span>
            <h2 class="species-name">蒲公英</h2>
            <p class="scientific-name">Taraxacum officinale</p>
            <p class="species-description">蒲公英是常见的多年生草本植物，以其独特的绒毛种子和药用价值而闻名，广泛分布于世界各地。</p>
            <ul class="species-features">
              <li>种子带有绒毛，可随风传播</li>
              <li>全株可入药，有清热解毒功效</li>
              <li>嫩叶可作野菜食用</li>
            </ul>
          </div>
        </div>

        <div class="species-card" data-id="chinese-alligator" data-category="animal" data-name="扬子鳄">
          <button class="favorite-btn" data-id="chinese-alligator">
            <i class=" far fa-heart"></i>
          </button>
          <div class="species-image">
            <img src="image/chinese-alligator.jpeg" alt="扬子鳄" loading="lazy">
          </div>
          <div class="species-content">
            <span class="category-label animal">动物</span>
            <h2 class="species-name">扬子鳄</h2>
            <p class="scientific-name">Alligator sinensis</p>
            <p class="species-description">扬子鳄是中国特有的珍稀鳄类，是世界上体型最小的鳄鱼之一，主要分布在长江中下游地区。</p>
            <ul class="species-features">
              <li>世界上体型最小的鳄鱼之一</li>
              <li>性情相对温和，攻击性较弱</li>
              <li>已在地球上生存了2亿多年</li>
            </ul>
          </div>
        </div>

        <div class="species-card" data-id="lithops" data-category="plant" data-name="生石花">
          <button class="favorite-btn" data-id="lithops">
            <i class="far fa-heart"></i>
          </button>
          <div class="species-image">
            <img src="image/lithops.jpg" alt="生石花" loading="lazy">
          </div>
          <div class="species-content">
            <span class="category-label plant">植物</span>
            <h2 class="species-name">生石花</h2>
            <p class="scientific-name">Lithops</p>
            <p class="species-description">生石花是多肉植物中的珍品，外形酷似石头，是植物拟态生存的杰出代表，原产于南非和纳米比亚。</p>
            <ul class="species-features">
              <li>外形酷似鹅卵石，拟态生存</li>
              <li>每年秋季开出美丽的花朵</li>
              <li>极耐干旱，适应沙漠环境</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <footer>
      <div class="footer-container">
        <div class="footer-content">
          <!-- 网站信息 -->
          <div class="footer-section">
            <h4>自然微览</h4>
            <p>探索奇妙动植物世界，发现自然之美。</p>
            <div class="social-links">
              <a href="#" aria-label="微信公众号">
                <i class="fab fa-weixin"></i>
              </a>
              <a href="#" aria-label="微博">
                <i class="fab fa-weibo"></i>
              </a>
              <a href="#" aria-label="知乎">
                <i class="fab fa-zhihu"></i>
              </a>
            </div>
          </div>

          <!-- 联系方式 -->
          <div class="footer-section">
            <h4>联系我们</h4>
            <div class="contact-info">
              <p><i class="fas fa-envelope"></i> contact@natureview.com</p>
              <p><i class="fas fa-phone"></i> +86 400-123-4567</p>
              <p><i class="fas fa-map-marker-alt"></i> 赣州市南康区客家大道</p>
            </div>
          </div>

          <!-- 关于我们 -->
          <div class="footer-section">
            <h4>关于我们</h4>
            <p>自然微览致力于普及动植物科学知识，传播生态文明理念，让更多人了解和保护我们共同的自然家园。</p>
          </div>
        </div>

        <!-- 版权信息 -->
        <div class="footer-bottom">
          <div class="copyright">
            <p>&copy; 2025 自然微览 - Web前端开发课程项目 | 版权所有</p>
            <div class="legal-links">
              <a href="#">隐私政策</a>
              <span class="divider">|</span>
              <a href="#">使用条款</a>
              <span class="divider">|</span>
              <a href="#">网站地图</a>
            </div>
          </div>
        </div>
      </div>
    </footer>
  </div>

  <!-- 详情页面 -->
  <div id="detail-page" class="detail-page">
    <div class="detail-header">
      <button class="back-button">← 返回主页</button>
      <h2>生物详细信息</h2>
    </div>

    <div class="detail-content">
      <button class="detail-favorite-btn" id="detail-favorite-btn">
        <i class="far fa-heart"></i>
        <span>收藏</span>
      </button>

      <div class="detail-image">
        <img id="detail-img" src="" alt="" loading="lazy">
      </div>

      <div class="detail-info">
        <h1 id="detail-name" class="detail-name"></h1>
        <p id="detail-scientific" class="detail-scientific"></p>

        <div class="detail-section">
          <h3>基本介绍</h3>
          <p id="detail-description"></p>
        </div>

        <div class="detail-section">
          <h3>详细特征</h3>
          <div id="detail-features" class="detail-features"></div>
        </div>

        <div class="detail-section">
          <h3>生态习性</h3>
          <p id="detail-habitat"></p>
        </div>

        <div class="detail-section">
          <h3>有趣的小知识</h3>
          <p id="detail-fun-facts"></p>
        </div>

        <div class="detail-section">
          <h3>参考资料</h3>
          <div id="detail-references" class="references-list"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- 收藏页面 -->
  <div id="favorites-page" class="favorites-page">
    <div class="favorites-header">
      <button class="back-button favorites-back-button">← 返回主页</button>
      <h2>我的收藏</h2>
      <span class="favorites-count" id="favorites-count">0</span>
    </div>

    <div class="no-results" id="empty-favorites">
      <div class="empty-favorites">
        <i class="far fa-heart" style="font-size: 3rem; margin-bottom: 1rem; color: #ccc;"></i>
        <h3>暂无收藏</h3>
        <p>快去发现你喜欢的动植物并收藏它们吧！</p>
      </div>
    </div>

    <div class="species-container" id="favorites-container">
      <!-- 收藏的内容会加载到这里 -->
    </div>
  </div>
  <script src="zrwl.js"></script>
</body>

</html>